<template>
	<view>
		<uni-nav-bar title="新的朋友" :statusBar="true" :border="false" left-icon="back" :fixed="true"
			@clickLeft="$tab.back()" background-color="#fff" >
		</uni-nav-bar>

		<view class="py-20 px-20" style="background-color: #fff;">
			<u-search placeholder="手机号/昵称" v-model="keyword" @custom="getData"></u-search>
		</view>

		<view class="px-32">
			<view class="mt-32 text-gray" v-if="userList.length>0">
				近三天
			</view>
			<view class="" v-for="item in userList" :key="item.id"
				@click="$tab.nav(`/pages/chat2/newFriendDetail?id=${item.id}`)">
				<view class="flex items-center justify-between mt-40">
					<view class="flex items-center">
						<image :src="item.friendInfo.avatar" class="image-80 round-8" mode=""></image>
						<view class="text-32 font-500 ml-20">
							{{ item.friendInfo.nickName }}
						</view>
					</view>
					<view class="" v-if="userInfo.userId == item.targetUserId">
						<view class="add text-center text-32 text-FFF " v-if="item.state == 0">
							同意
						</view>
					</view>

					<view class="" v-else>
						<view class="text-9E9E9E" v-if="item.state == 0">
							等待验证
						</view>
					</view>
					<view class="text-9E9E9E" v-if="item.state == 1">
						已添加
					</view>
				</view>
				<u-divider></u-divider>
			</view>
			
			<view class="mt-32 text-gray" v-if="threeDayBefore.length>0">
				三天前
			</view>
			<view class="" v-for="item in threeDayBefore" :key="item.id"
				@click="$tab.nav(`/pages/chat2/newFriendDetail?id=${item.id}`)">
				<view class="flex items-center justify-between mt-40">
					<view class="flex items-center">
						<image :src="item.friendInfo.avatar" class="image-80 round-8" mode=""></image>
						<view class="text-32 font-500 ml-20">
							{{ item.friendInfo.nickName }}
						</view>
					</view>
					<view class="" v-if="userInfo.userId == item.targetUserId">
						<view class="add text-center text-32 text-FFF" v-if="item.state == 0">
							同意
						</view>
					</view>
			
					<view class="" v-else>
						<view class="text-9E9E9E" v-if="item.state == 0">
							等待验证
						</view>
					</view>
					<view class="text-9E9E9E" v-if="item.state == 1">
						已添加
					</view>
				</view>
				<u-divider></u-divider>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userList: [],
				userInfo: this.$store.getters.userInfo,
				keyword: "",
				threeDayBefore:[],
			};
		},
		onShow() {
			this.getData()
		},
		methods: {
			async getData() {
				const res = await this.$Api.chat.newFriendList({
					keyword: this.keyword
				})
				console.log('新的朋友', res)
				this.userList = res.threeDayNear
				this.threeDayBefore = res.threeDayBefore
			}
		}
	}
</script>

<style lang="scss">
	.add {
		width: 180rpx;
		height: 80rpx;
		background: #f42e36;
		line-height: 80rpx;
	}
</style>